<template>
    <div class="container">
        <mt-header title="评价">
            <router-link to="/order" slot="left">
                <mt-button icon="back">返回</mt-button>
            </router-link>
        </mt-header>
        <div class="titleContainer">
            <span class='title'>您对商家/菜品还满意吗?</span>
            <mt-switch v-model="anonymous" class="right"><span>提交匿名</span></mt-switch>
        </div>
        <div class="shopMessage">
            <img :src="'/file'+shopBase.shopUrl">
            <span>{{shopBase.shopName}}</span>
        </div>
        <div class="scoreContainer">
            <span>总体</span>
            <el-rate v-model="score"></el-rate>
            <span>{{scoreList[score]}}</span>
        </div>
        <div class="inputMessage">
            <!-- 输入评价内容 -->
            <el-input
                type="textarea"
                placeholder="请输入评价内容"
                v-model="textarea"
                maxlength="150"
                show-word-limit
                >
            </el-input>
            <p>文字评论15字以上得<span class="yellow">3</span>积分</p>
            <p>传图得<span class="yellow">5</span>积分</p>
            <p>评价菜品再得<span class="yellow">2</span>积分</p>
            <!-- 上传图片 -->
            <el-upload
                :multiple="multiple"
                action="/estimate/upPhoto"
                list-type="picture-card"
                :auto-upload="false"
                :http-request="uploadFile"
                ref="upload"
                :limit="4"
                >
                <i class="el-icon-plus"></i>
            </el-upload>
            <div class="foodContainer">
                <div class="foodBox" v-for="(item,index) in foodDetails" :key="index">
                    <img class="imgBox" :src="'/file'+item.foodUrl">
                    <span>{{item.foodName}}</span>
                    <div class="right">
                        <span @click="support(item['_id'],0)">
                            <img src="../images/踩.svg" v-if="foodRecommond[item['_id']]==undefined||foodRecommond[item['_id']]!=0">
                            <img src="../images/踩1.svg" v-if="foodRecommond[item['_id']]!=undefined&&foodRecommond[item['_id']]==0">
                            踩
                        </span>
                        <span @click="support(item['_id'],1)">
                            <img src="../images/赞.svg" v-if="foodRecommond[item['_id']]==undefined||foodRecommond[item['_id']]!=1">
                            <img src="../images/赞1.svg" v-if="foodRecommond[item['_id']]!=undefined&&foodRecommond[item['_id']]==1">
                            赞
                        </span>
                    </div>
                </div>
            </div>
        </div>
        <div class="footer">
            <button @click="submit">提交评论</button>
        </div>
    </div>
</template>
<script>
    import axios from 'axios'
    import Vue from 'vue'
    export default{
        data(){
            return{
                anonymous:false,
                score:0,
                scoreList:["","十分不满意","不满意","一般","满意","非常满意"],
                textarea:null,
                multiple:true,
                formDate:"",
                imgNum:0,
                orderId:this.$route.params.orderId,
                foodRecommond:{},
                foodDetails:[],
                shopBase:{},
            }
        },
        computed:{
            integral(){
                let sum=0;
                if(this.textarea.length>=15)
                    sum=sum+3;
                if(this.imgNum!=0)
                    sum=sum+5;
                if(this.foodRecommond.length==0)
                    sum=sum+2;
                return sum;
            }
        },
        mounted(){
            this.initMessage();
        },
        methods:{
            async initMessage(){
                this.orderId=this.$route.params.orderId;
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                let postData={
                    orderId:this.orderId
                }
                await this.getRequest('/order/getOrderBase',postData,tokenStr).then(response=>{
                    if(response.code==200){
                        this.shopBase=response.obj.shopBase;
                        this.foodDetails=response.obj.foodDetails;
                    }
                })
            },
            support(index,tag){
                Vue.set(this.foodRecommond,index,tag);
                //向对象中新增属性时，Vue无法监听新增的属性的数据变化，从而无法触发视图的改变
                //解决方法用Vue.set
            },
            uploadFile(file){//http-requst=uploadFile覆盖组件的默认上传方法
                this.imgNum=this.imgNum+1;
                this.formDate.append('photoList', file.file);
            },
            submit(){
                this.formDate = new FormData();
                this.$refs.upload.submit();
                //触发开始上传文件事件（this.$refs.upload.submit()）后，
                //组件会遍历当前文件列表的文件，并调用uploadFlie()方法，
                //在uploadFile()里传入一个file参数，每次调用uploadFile方法，把遍历到的文件append到FormData里去
                let tokenStr=window.sessionStorage.getItem('tokenStr');
                this.formDate.append('orderId',this.orderId);//订单号
                this.formDate.append('score',this.score*100);//分数
                this.formDate.append('integral',this.integral);//积分
                this.formDate.append('content',this.textarea);//评论内容
                if(this.anonymous)
                    this.formDate.append('anonymous',1);//是否匿名
                else this.formDate.append('anonymous',0);
                this.formDate.append('foodRecommond',JSON.stringify(this.foodRecommond));//赞、踩
                axios({
                    method:'post',
                    url:"/estimate/addEstimate",
                    headers: {
                        'Content-Type': 'multipart/form-data',
                        'Authorization': tokenStr,
                    },
                    data:this.formDate
                }).then(response=>{
                    if(response.code==200){
                        console.log('评论成功');
                    }
                })
            }
        }
    }
</script>
<style lang="scss" scoped>
    @import 'mint-ui/lib/style.css';
    @import '../style/mixin';
    *{
        margin: 0;
        padding: 0;
    }
    .container{
        display: flex;
        flex-direction: column;
        .right{
            position: absolute;
            right:1rem;
        }
        .titleContainer{
            display: flex;
            align-items: center;
            @include width-height(100%,3rem);
            position: relative;
            .title{
                @include font-size-color(1.5rem,#000);
                font-weight: bold;
                padding-left: 0.5rem;
            }
            span{
                @include font-size-color(1rem,#666);
            }
        }
        .shopMessage{
            display: flex;
            align-items: center;
            img{
                @include width-height(4rem,4rem);
                padding-left: 0.5rem;
                border-radius: 0.5rem;
            }
            span{
                padding-left: 0.5rem;
                @include font-size-color(1.2rem,#000);
            }
        }
        /deep/ .el-rate{
            height:2rem;
            padding: 0 0.5rem 0 0.5rem;
        }
        /deep/ .el-rate__icon{
            font-size:2rem;
        }
        .scoreContainer{
            display: flex;
            align-items: center;
            @include width-height(100%,2rem);
            padding: 0.5rem 0 0 0.5rem;
            span{
                @include font-size-color(1.2rem,#000);
                font-weight: bold;
            }
        }
        /deep/ .el-textarea{
            font-size: 1.2rem;
        }
        /deep/ .el-textarea__inner{
            line-height: 1.5;
            min-height: 10rem !important;
        }
        /deep/ .el-upload--picture-card{
            width:6rem;
            height:6rem;
            line-height: 6.5rem;
        }
        /deep/ .el-upload-list__item{
            width:6rem;
            height:6rem;
        }
        .inputMessage{
            margin-top:0.5rem;
            padding:0.5rem;
            @include white;
            position: relative;
            p{
                padding-top:0.3rem;
                @include font-size-color(1rem,#666);
                text-align: right;
            }
            .yellow{
                @include font-size-color(1rem,rgba(231, 73, 25, 0.87));
            }
        }
        .foodContainer{
            background-color: #fff;
            margin-top: 0.5rem;
            .foodBox{
                padding-top:0.25rem;
                @include width-height(100%,3rem);
                display: flex;
                align-items: center;
                position: relative;
                .imgBox{
                    padding-left: 0.5rem;
                    @include width-height(2.5rem,2.5rem);
                    border-radius: 0.5rem;
                }
                span{
                    padding-left: 0.5rem;
                    position: float;
                    z-index: 999;
                }
                img{
                    padding-right: 0.3rem;
                    @include width-height(1.1rem,1.1rem);
                }
            }
        }
        .footer{
            position: fixed;
            @include width-height(100%,3rem);
            bottom: 0.5rem;
            text-align: right;
            button{
                margin-right:1rem;
                @include width-height(6rem,2.5rem);
                @include blue;
                border:none;
                @include font-size-color(1.2rem,#fff);
                border-radius: 0.5rem;
            }
        }
    }
</style>